<template>
	<div>
		<div style="display: inline-block;">
			<div style="margin:2% 0;display: inline-block;">
				<span>优惠券名称：</span>
				<el-input style="width:200px;" @keydown.enter.native="select" clearable placeholder="请输入优惠券名称"
					v-model="couponName"></el-input>
			</div>
			<div style="margin:2% 0;display: inline-block;">
				<span>手机号：</span>
				<el-input style="width:200px;" @keydown.enter.native="select" clearable placeholder="请输入手机号"
					v-model="phone"></el-input>
			</div>
			<div style="margin:2% 0;display: inline-block;">
				<span>状态：</span>
				<el-select v-model="status" style="width:150px;margin-left: 10px;" @change="select(status)">
					<el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;&nbsp;
			</div>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询
			</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置
			</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">刷新
			</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="tableData.records">
			<el-table-column prop="id" label="编号" width="80">
			</el-table-column>
			<el-table-column prop="couponName" label="优惠券名称" width="150">
			</el-table-column>
			<el-table-column prop="couponPicture" label="优惠券图片">
				<template slot-scope="scope">
					<img v-if="scope.row.couponPicture" :src="scope.row.couponPicture" alt="" width="40" height="40">
				</template>
			</el-table-column>
			<el-table-column prop="nickName" label="所属用户">
				<template slot-scope="scope">
					<span style="color: #3E8EF7;cursor: pointer;" @click="updates(scope.row)"
						v-if="scope.row.userName">{{scope.row.userName}}</span>
					<!-- <el-button size="mini" style="color: #008000;background: #fff;border: none;padding: 0;"
						type="primary" :disabled="!isAuth('userList:details')" @click="updates(scope.row)">
						{{scope.row.userName ? scope.row.userName : '未绑定'}}
					</el-button> -->
				</template>
			</el-table-column>
			<el-table-column prop="avatar" label="用户头像">
				<template slot-scope="scope">
					<img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" width="40" height="40">
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="手机号">
			</el-table-column>
			<el-table-column prop="money" label="优惠券面值">
			</el-table-column>
			<el-table-column prop="minMoney" label="优惠券最低消费">
			</el-table-column>
			<el-table-column prop="expirationTime" label="优惠券失效时间" width="150">
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<span style="color: #3E8EF7;" v-if="scope.row.status == 0">未使用</span>
					<span v-if="scope.row.status == 1">已使用</span>
					<span v-if="scope.row.status == 2">已过期</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="150">
			</el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="size" :current-page="page"
				layout="total,sizes, prev, pager, next" :total="tableData.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				size: 10,
				page: 1,
				couponName: '',
				formLabelWidth: '200px',
				tableDataLoading: false,
				dialogFormVisible: false,
				tableData: [],
				phone: '',
				status: '',
				statesnum: [{
						label: '全部',
						value: ''
					},
					{
						label: '未使用',
						value: 0
					},
					{
						label: '已使用',
						value: 1
					},
					{
						label: '已过期',
						value: 2
					},
				],
			}
		},

		methods: {
			handleSizeChange(val) {
				this.size = val;
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.dataSelect()
			},
			// 查询
			select() {
				this.page = 1
				this.dataSelect()
			},
			// 重置
			cleans() {
				this.page = 1
				this.phone = ''
				this.status = ''
				this.couponName = ''
				this.dataSelect()
			},
			// 刷新
			refresh() {
				this.dataSelect()
			},
			//获取已发布优惠券数据
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('admin/couponUser/getMyCouponList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.size,
						'couponName': this.couponName,
						'phone': this.phone,
						'status': this.status,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.tableData = returnData
				})
			},
			// 详情跳转
			updates(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId
					}
				})
			},
		},
		mounted() {
			this.dataSelect()
		}
	};
</script>

<style scoped="scoped">
	.divhove {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0;
		cursor: default;
		text-align: center;
		padding-top: 50%;
		border-radius: 6px;
		background-color: rgba(0, 0, 0, .5);
		-webkit-transition: opacity .3s;
		transition: opacity .3s;
	}

	.el-tag--medium {
		margin-right: 10px;
	}

	.divhove:hover {
		opacity: 0.8;
	}
</style>